<template>
  <div class="item-panel">
    <ProgressItem
      v-for="item of data"
      :rule="rule"
      :label="Material[item.label]"
      v-model="item.value"
      @handler="(fieldName) => handler(fieldName, item)"
    />
  </div>
</template>

<script setup lang="ts">
import ProgressItem from './progress-item.vue';

defineOptions({
  name: 'Property',
});

interface IProps {
  data: any[];
}

const props = withDefaults(defineProps<IProps>(), {
  data: () => [],
});

const emits = defineEmits(['handler']);

const Material: any = {
  metallic: '金属度',
  roughness: '粗糙度',
  specular: '反射度',
  glossiness: '光泽度',
};

const rule = {
  min: 0,
  max: 1,
  step: 0.01,
};

function handler(fieldName: string, item: any) {
  emits('handler', item);
}
</script>

<style lang="less" scoped>
.item-panel {
  background: #0a0b0d;
  border-radius: 8px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
  margin-top: 10px;

  .progress-input {
    width: 66px;

    margin-left: 7px;
  }

  .row-item {
    margin-top: 10px !important;

    &.color-picker-item {
      padding-top: 10px !important;
    }
  }

  :deep(.el-color-picker) {
    margin-left: 12px;
  }
}
</style>
